<template>
  <div class="newAgency">

    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/institutions' }">机构列表</el-breadcrumb-item>
      <el-breadcrumb-item>新增用户</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="aroundOf">新增用户</div>
    <div class="firmly">
      <el-form
        :model="firmly"
        :rules="rules"
        ref="ruleForm"
        label-width="145px"
        class="demo-ruleForm"
      >
        <el-form-item label="机构名称：" prop="name" style="width: 666px;">
          <el-input v-model="firmly.name" placeholder="（必填）请输入50字以内的机构名称" clearable maxlength="50" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="机构简称：" style="width: 50%;">
          <el-input v-model="firmly.jianname" placeholder="（非必填）请输入50字以内的机构简称" clearable maxlength="50" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="联系人：" prop="linkman" style="width: 50%;">
          <el-input v-model="firmly.linkman" placeholder="（必填）请输入20字以内的字符" clearable maxlength="20" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="手机号：" prop="phone" style="width: 50%;">
          <el-input v-model="firmly.phone" placeholder="（必填）请输入11位手机号" clearable @input="imageTextInputChange" maxlength="11" show-word-limit></el-input>
        </el-form-item>
        <el-form-item style="text-align: left;">
          <el-button type="primary" @click="submitForm('ruleForm')" style="width: 120px;margin-top: 40px;">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firmly: {
        name: '', //机构名称
        jianname: '',  //机构简称
        linkman: '',  //联系人
        phone: '',  //手机号
      },
      rules: {
        name: [
          { required: true, message: '请输入机构名称', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        linkman: [
          { required: true, message: '请输入联系人名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系人手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '11个数组组成的手机号', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // input只能输入数字
    imageTextInputChange(val) {
      this.firmly.phone = val.replace(/[^\d]/g, "");
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.institutions.newAgency(this.firmly).then( res => {
            this.$message({
              message: '恭喜你，添加数据成功',
              type: 'success'
            });
            console.log(res)
          })
          setTimeout( () => {
            this.$router.go(-1);//返回上一层
          },1500)
        } else {
          return false;
        }
      });
    },
  }
};
</script>

<style scoped>
@import '../../assets/css/institutions/newAgency.scss';
</style>
